<template>
  <div class="loginBody clear">
    <div class="loginTitle">
      <div :class="{bold:msg.bold,grey:msg.grey}"
           @click="useMsg()">短信验证码登录</div>
      <div>|</div>
      <div :class="{bold:usm.bold,grey:usm.grey}"
           @click="useUsm()">账号密码登录</div>
    </div>
    <div class="loginBox">
      <div class="useMsg"
           v-show="msg.bold==true">
        <div class="loginItem">
          <div class="loginIcon">
            <van-icon name="contact"
                      size="0.4rem" />
          </div>
          <input type="text"
                 placeholder="用户名/手机号"
                 v-model.trim="phonenum" />
          <van-icon name="cross"
                    size="0.4rem"
                    v-show="phonenum"
                    @click="clearphonenum()" />
        </div>
        <div class="loginItem">
          <div class="loginIcon">
            <van-icon name="lock"
                      size="0.4rem" />
          </div>
          <input type="text"
                 placeholder="动态验证码"
                 v-model.trim="activenum" />
          <a href="javascript:void(0);">获取验证码</a>
        </div>
        <div class="loginItem">
          <span>七天内免登录</span>
          <van-switch v-model="checked"
                      active-color="#07c160" />
        </div>
      </div>
      <div class="useUsm"
           v-show="usm.bold==true">
        <div class="loginItem">
          <div class="loginIcon">
            <van-icon name="contact"
                      size="0.4rem" />
          </div>
          <input type="text"
                 placeholder="用户名/手机号"
                 v-model.trim="username" />
          <van-icon name="cross"
                    size="0.4rem"
                    v-show="username"
                    @click="clearusername()" />
        </div>
        <div class="loginItem">
          <div class="loginIcon">
            <van-icon name="lock"
                      size="0.4rem" />
          </div>
          <input type="password"
                 placeholder="请输入密码"
                 v-model.trim="password" />
          <van-icon name="cross"
                    size="0.4rem"
                    v-show="password"
                    @click="clearpassword()" />
        </div>
        <div class="loginItem">
          <span>七天内免登录</span>
          <van-switch v-model="checked"
                      active-color="#07c160" />
        </div>
      </div>
    </div>
    <a href="javascript:void(0);"
       :class="{login:phonenum&&activenum||username&&password}"
       class="submit">
      <span>登录</span>
    </a>
    <div class="newuser">
      <a href="#/reg">新用户注册</a>
      <a href="javascript:void(0);">忘记密码</a>
    </div>
    <div class="qqlogin">
      <span>第三方登录</span>
      <a href="javascript:void(0);">
        <img src="//img2.ch999img.com/spa-static/mall-m/assets/qq.7df9dcd2828ad5eaeee0e76ce8f7d917.png"
             alt />
      </a>
    </div>
    <div class="van-button--primary suc"
         style="display:none">登陆成功</div>
    <div class="van-button--primary error"
         style="display:none">用户名不存在或密码错误</div>
  </div>
</template>
<script>
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  data () {
    return {
      msg: {
        bold: false,
        grey: true
      },
      usm: {
        bold: true,
        grey: false
      },
      phonenum: "",
      activenum: "",
      username: "",
      password: "",
      checked: false
    };
  },
  methods: {
    useMsg () {
      this.msg.bold = true;
      this.msg.grey = false;
      this.usm.bold = false;
      this.usm.grey = true;
      this.clearall();
    },
    useUsm () {
      this.msg.bold = false;
      this.msg.grey = true;
      this.usm.bold = true;
      this.usm.grey = false;
      this.clearall();
    },
    clearphonenum () {
      this.phonenum = "";
    },
    clearactivenum () {
      this.activenum = "";
    },
    clearusername () {
      this.username = "";
    },
    clearpassword () {
      this.password = "";
    },
    clearall () {
      this.password = "";
      this.username = "";
      this.activenum = "";
      this.phonenum = "";
    }
  },
  mounted () {
    $(".submit").click(() => {
      if (
        (this.phonenum && this.activenum) ||
        (this.username && this.password)
      ) {
        if (this.username && this.password) {
          $.ajax({
            type: "post",
            url: "/user/login",
            data: {
              username: this.username,
              password: this.password
            },
            dataType: "json",
            success: response => {
              if (response.msg == "登录成功") {
                if (this.checked) {
                  localStorage.id = response.id;
                  localStorage.token = response.token;
                  localStorage.username = this.username;
                  localStorage.checked = JSON.stringify(this.checked);
                } else {
                  sessionStorage.id = response.id;
                  sessionStorage.token = response.token;
                  sessionStorage.username = this.username;
                  localStorage.checked = JSON.stringify(this.checked);
                }
                $(".suc").show();
                setTimeout(() => {
                  $.ajax({
                    type: "post",
                    url: "/goods/cart",
                    data: { type: "get", id: response.id },
                    dataType: "json",
                    success: response => {
                      if (response.data.length == 0) {
                        this.$store.state.cart = 0;
                      } else {
                        let num = 0;
                        response.data.forEach(item => {
                          num += item.num * 1;
                        });
                        this.$store.state.cart = num;
                      }
                    }
                  });
                  if ((sessionStorage.redirect = !undefined)) {
                    sessionStorage.removeItem("redirect");
                    // window.location.href = "http://120.25.216.55:1912/#/cart";
                    this.$router.push(`/cart`)
                  } else {
                    window.history.back();
                  }
                }, 1000);
              } else {
                $(".error").show();
                setTimeout(() => {
                  $(".error").hide();
                }, 1000);
              }
            }
          });
        }
      }
    });
  }
};
</script>
<style scoped>
.loginBody {
  width: 100vw;
  overflow: hidden;
}
.loginTitle {
  margin: 30px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginTitle div {
  font-size: 14px;
  color: #333333;
}
.loginTitle div:nth-of-type(2) {
  margin: 0px 20px;
}
.loginTitle .bold {
  font-weight: bold;
}
.loginTitle .grey {
  color: #9c9c9c;
}
.loginBox {
  margin: 10px 20px;
}
.loginItem {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dfdfdf;
}
.loginIcon {
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 10px;
  text-align: center;
}
.loginIcon i {
  display: block;
  text-align: center;
  line-height: 0.4rem;
  width: 100%;
  height: 100%;
}
.loginItem input {
  display: block;
  flex: 1;
  height: 0.83rem;
  border: 0;
  outline: none;
  font-size: 0.28rem;
  color: #333;
}
.loginItem a {
  padding: 0.14rem;
  border-radius: 0.08rem;
  border: 0.02rem solid #78b;
  color: #78b;
  font-size: 0.24rem;
}
.loginItem span {
  color: #6b6b6b;
  font-size: 0.28rem;
}
.submit {
  background-color: #dfdfdf;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.9rem;
  margin: 0.4rem;
  margin-top: 0.8rem;
  border-radius: 0.9rem;
}
.submit span {
  font-size: 0.32rem;
  color: white;
}
.loginBody .login {
  background-color: #f21c1c;
}
.newuser {
  display: flex;
  margin: 20px;
  justify-content: space-between;
}
.newuser a {
  font-size: 0.28rem;
  color: #333;
}
.qqlogin {
  display: flex;
  margin-top: 70px;
  align-items: center;
  flex-direction: column;
}
.qqlogin span {
  font-size: 0.28rem;
  color: #9c9c9c;
}
.qqlogin a {
  margin: 15px;
  display: block;
  width: 0.68rem;
  height: 0.68rem;
}
.qqlogin a img {
  display: block;
  width: 0.68rem;
  height: 0.68rem;
}
.van-button--primary {
  width: 3.34rem;
  height: 1.76rem;
  background-color: black;
  border-color: black;
  opacity: 0.6;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -0.88rem;
  margin-left: -1.76rem;
  line-height: 1.76rem;
  text-align: center;
  font-size: 0.28rem;
  color: white;
}
</style>